<template>
  <div class="design-item">
    <div class="design-item-controller">
      <div class="design-item-controller-handle">
        <div class="design-component-goods-preview">
          <!--瀑布流-->
          <div
            class="goods-list goods-list-container-waterfall goods-list-container-waterfall-2"
            v-if="size == 1 && sizeType == 3"
          >
            <ul class="goods-list-items" v-for="(numItem ,numIndex) in 2" :key="numIndex">
              <li
                :class="getClassByMethod('goodsListWrapper', index,item)"
                v-for="(item , index ) in compGoodsList"
                :key="index"
              >
                <a
                  :class="getClassByMethod('goodsListItem' ,index,item )"
                  href="javascript:;"
                  v-if="index%2 == numIndex"
                >
                  <div class="goods-list-photo">
                    <img class="goods-list-img" :src="item.goodsImageUrl" />
                  </div>
                  <div
                    :class="getClassByMethod('goodsListInfo',index,item )"
                    v-if="showGoodsInfoPanel"
                  >
                    <h3 class="title" v-if="enableShowTitle && showTitle">{{item.goodsName}}</h3>
                    <!--详细列表的特殊情况-->
                    <h3 class="title" v-if="size == 3">{{item.goodsName}}</h3>
                    <p v-if="enableSubTitlePreview(item)" class="sub-title">{{item.shareIntro}}</p>
                    <p
                      class="price"
                      v-if="(enableShowPrice && showPrice ) || sizeType == 4 "
                    >{{item.goodsPrice}}</p>
                    <!--详细列表的特殊情况-->
                    <p class="price" v-if="size == 3">{{item.goodsPrice}}</p>
                  </div>
                  <div
                    v-if="sizeType != 4 && enableShowBuyBtn && showBuyBtn"
                    :class="['goods-list-buy-btn-wrapper' ,'goods-list-buy-btn-wrapper-'+ buyBtnType ]"
                  >
                    <i v-if="buyBtnType == 0" class="goods-list-buy-btn goods-list-buy-btn-0"></i>
                    <i v-if="buyBtnType == 1" class="goods-list-buy-btn goods-list-buy-btn-1"></i>
                    <button v-if="buyBtnType == 2" class="goods-list-buy-btn-2">
                      <span class="button-text">{{buyBtnText}}</span>
                    </button>
                    <button v-if="buyBtnType == 3" class="goods-list-buy-btn-3">
                      <span class="button-text">{{buyBtnText}}</span>
                    </button>
                  </div>
                  <div
                    v-if="sizeType ==4 "
                    class="goods-list-buy-btn-wrapper goods-list-buy-btn-wrapper-4"
                  >
                    <button class="goods-list-buy-btn-4">
                      <span class="button-text">我要抢购</span>
                    </button>
                  </div>
                  <div v-if="showCornerMark">
                    <i
                      :class="['goods-list-corner-back', 'goods-list-corner-back-' + cornerMarkType]"
                    ></i>
                    <div
                      v-if="cornerMarkType==4 && !cornerMarkImage"
                      class="goods-list-corner-mark goods-list-corner-mark-default"
                    >
                      <span>角标</span>
                      <br />
                      <span>区域</span>
                    </div>
                    <img
                      v-if="cornerMarkType==4 && cornerMarkImage"
                      :src="cornerMarkImageUrl"
                      class="goods-list-corner-mark goods-list-corner-mark-custom"
                    />
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <!--正常的列表-->
          <div class="goods-list" v-else>
            <ul :class="getClassByMethod('goodsListContainer')">
              <li
                :class="getClassByMethod('goodsListWrapper', index,item)"
                v-for="(item , index ) in compGoodsList"
                :key="index"
              >
                <a :class="getClassByMethod('goodsListItem' ,index,item )" href="javascript:;">
                  <div class="goods-list-photo">
                    <img
                      :class="['goods-list-img' , {'large-height': size == 0 && imageFillStyle ==1} ]"
                      :src="item.goodsImageUrl"
                    />
                  </div>
                  <div
                    :class="getClassByMethod('goodsListInfo',index,item )"
                    v-if="showGoodsInfoPanel"
                  >
                    <h3 class="title" v-if="enableShowTitle && showTitle">{{item.goodsName}}</h3>
                    <!--详细列表的特殊情况-->
                    <h3 class="title" v-if="size == 3">{{item.goodsName}}</h3>
                    <p v-if="enableSubTitlePreview(item)" class="sub-title">{{item.shareIntro}}</p>
                    <p
                      class="price"
                      v-if="(enableShowPrice && showPrice ) || sizeType == 4 "
                    >{{item.goodsPrice}}</p>
                    <!--详细列表的特殊情况-->
                    <p class="price" v-if="size == 3">{{item.goodsPrice}}</p>
                  </div>
                  <div
                    v-if="sizeType != 4 && enableShowBuyBtn && showBuyBtn"
                    :class="['goods-list-buy-btn-wrapper' ,'goods-list-buy-btn-wrapper-'+ buyBtnType ]"
                  >
                    <i v-if="buyBtnType == 0" class="goods-list-buy-btn goods-list-buy-btn-0"></i>
                    <i v-if="buyBtnType == 1" class="goods-list-buy-btn goods-list-buy-btn-1"></i>
                    <button v-if="buyBtnType == 2" class="goods-list-buy-btn-2">
                      <span class="button-text">{{buyBtnText}}</span>
                    </button>
                    <button v-if="buyBtnType == 3" class="goods-list-buy-btn-3">
                      <span class="button-text">{{buyBtnText}}</span>
                    </button>
                  </div>
                  <div
                    v-if="sizeType ==4 "
                    class="goods-list-buy-btn-wrapper goods-list-buy-btn-wrapper-4"
                  >
                    <button class="goods-list-buy-btn-4">
                      <span class="button-text">我要抢购</span>
                    </button>
                  </div>
                  <div v-if="showCornerMark">
                    <i
                      :class="['goods-list-corner-back', 'goods-list-corner-back-' + cornerMarkType]"
                    ></i>
                    <div
                      v-if="cornerMarkType==4 && !cornerMarkImage"
                      class="goods-list-corner-mark goods-list-corner-mark-default"
                    >
                      <span>角标</span>
                      <br />
                      <span>区域</span>
                    </div>
                    <img
                      v-if="cornerMarkType==4 && cornerMarkImage"
                      :src="cornerMarkImageUrl"
                      class="goods-list-corner-mark goods-list-corner-mark-custom"
                    />
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <slot name="menu"></slot>
    </div>
    <div class="design-item-editor design-item-editor-goods" v-show="show && !showAddMenuGroup">
      <div>
        <div class="design-item-editor-title">商品</div>
        <div class="editor-group">
          <div class="editor-group-label">商品来源：</div>
          <div class="editor-group-control">
            <el-radio-group v-model="goodsFrom">
              <el-radio :label="0">手动添加</el-radio>
              <el-radio :label="1">自助获取</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="controls-card" v-show="goodsFrom == 0 ">
          <div class="editor-group no-mb">
            <div class="editor-group-label editor-group-label-top">商品：</div>
            <div class="editor-group-control">
              <draggable
                v-model="goodsList"
                :options="{group:'people' , draggable:'.design-editor-card-item-inline'}"
              >
                <div
                  v-if="goodsList.length"
                  v-for="(item ,index ) in goodsList"
                  :key="item.commonId"
                  class="design-editor-card-item-inline"
                >
                  <div class="design-component-goods-item">
                    <a href="javascript:;" class="image-url">
                      <img
                        :src="item.goodsImageUrl"
                        class="design-component-goods-item-img"
                        :alt="item.goodsName"
                      />
                    </a>
                  </div>
                  <i
                    class="design-editor-card-item-delete el-icon-circle-close"
                    @click="bindRemoveGoods(index)"
                  ></i>
                </div>
              </draggable>
              <div class="design-editor-card-add-inline" @click="bindAddGoods">
                <span>
                  <i class="el-icon-plus design-editor-card-add-icon"></i>
                </span>
              </div>
            </div>
          </div>
          <div
            class="design-editor-control-group-error"
            style="margin-left: 93px;"
            v-if="!validated"
          >请选择商品</div>
        </div>
        <div class="controls-card" v-show="goodsFrom == 1 ">
          <div class="editor-group-control">
            <div class="editor-group">
              <div class="editor-group-label">分类：</div>
              <div class="editor-group-control" ref="cate">
                <category-group
                  :inputWidth="cateInputWith"
                  :init-cate-data="initCateData"
                  @on-categoryChange="handleCateChange"
                ></category-group>
              </div>
            </div>
            <div class="editor-group">
              <div class="editor-group-label">规则：</div>
              <div class="editor-group-control">
                <el-radio-group v-model="autoGoodsRule">
                  <el-radio
                    v-for="(item,index) in ['销量' ,'价格' , '上新']"
                    :label="index"
                    :key="index"
                  >{{item}}</el-radio>
                </el-radio-group>
                <!-- <label
                  v-for="(item,index) in ['销量' ,'价格' , '上新']"
                  :class="['nc-radio-wrap',{'nc-radio-checked' : autoGoodsRule == index}]"
                  @click=" autoGoodsRule= index "
                >
                  <span class="nc-radio">
                    <span class="nc-radio-inner"></span>
                  </span>
                  <span>{{item}}</span>
                </label>-->
              </div>
            </div>
            <div class="editor-group">
              <div class="editor-group-label">排序：</div>
              <div class="editor-group-control">
                <el-radio-group v-model="autoGoodsOrder">
                  <el-radio
                    v-for="(item,index) in ['升序' ,'降序' ]"
                    :label="index"
                    :key="index"
                  >{{item}}</el-radio>
                </el-radio-group>
                <!-- <label
                  v-for="(item,index) in ['升序' ,'降序' ]"
                  :class="['nc-radio-wrap',{'nc-radio-checked' : autoGoodsOrder == index}]"
                  @click=" autoGoodsOrder= index "
                >
                  <span class="nc-radio">
                    <span class="nc-radio-inner"></span>
                  </span>
                  <span>{{item}}</span>
                </label>-->
              </div>
            </div>
            <div class="editor-group">
              <div class="editor-group-label">显示个数：</div>
              <div class="editor-group-control">
                <div class="input-wrap">
                  <input v-on:blur="bindGoodsMaxInput" :value="goodsMax" class="input" />
                </div>
                <span class="inline-help-desc">最多显示50个</span>
              </div>
            </div>
          </div>
        </div>
        <div class="editor-group">
          <div class="editor-group-label editor-group-label-top">列表样式：</div>
          <div class="editor-group-control">
            <el-radio-group v-model="size">
              <el-radio v-for="(item ,index ) in sizeArray" :key="index" :label="index">{{item}}</el-radio>
            </el-radio-group>
            <!-- <div class="radio-group">
              <label
                v-for="(item ,index ) in sizeArray"
                :key="index"
                :class="['nc-radio-wrap',{'nc-radio-checked' : size == index}]"
                @click="bindModifySize(index)"
              >
                <span class="nc-radio">
                  <span class="nc-radio-inner"></span>
                </span>
                <span>{{item}}</span>
              </label>
            </div>-->
          </div>
        </div>
        <div class="controls-card">
          <div class="editor-group" v-if="! ( size ==1  && sizeType ==3 )">
            <div class="editor-group-label">图片填充方式：</div>
            <div class="editor-group-control">
              <el-radio-group v-model="imageFillStyle">
                <el-radio
                  v-for="(item ,index ) in imageFillStyleArray"
                  :key="index"
                  :label="index"
                >{{item}}</el-radio>
              </el-radio-group>
              <!-- <label
                v-for="(item ,index ) in imageFillStyleArray "
                :key="index"
                :class="['nc-radio-wrap',{'nc-radio-checked' : imageFillStyle == index}]"
                @click="imageFillStyle = index "
              >
                <span class="nc-radio">
                  <span class="nc-radio-inner"></span>
                </span>
                <span>{{item}}</span>
              </label>-->
            </div>
          </div>
          <div class="editor-group" v-if="enableDisplayScale">
            <div class="editor-group-label">显示比例：</div>
            <div class="editor-group-control">
              <el-radio-group v-model="displayScale">
                <el-radio
                  v-for="(item ,index ) in displayScaleArray"
                  :key="index"
                  :label="index"
                >{{item}}</el-radio>
              </el-radio-group>
              <!-- <label
                v-for="(item ,index ) in displayScaleArray "
                :key="index"
                :class="['nc-radio-wrap',{'nc-radio-checked' : displayScale == index}]"
                @click="displayScale = index "
              >
                <span class="nc-radio">
                  <span class="nc-radio-inner"></span>
                </span>
                <span>{{item}}</span>
              </label>-->
            </div>
          </div>
          <div class="editor-group">
            <div class="editor-group-label editor-group-label-top">显示样式：</div>
            <div class="editor-group-control">
              <el-radio-group v-model="sizeType">
                <el-radio
                  v-for="(item ,index ) in sizeTypeArray"
                  :key="index"
                  :label="item.key"
                >{{item.value}}</el-radio>
              </el-radio-group>
              <!-- <div class="radio-group">
                <label
                  v-for="(item,index) in sizeTypeArray "
                  :key="index"
                  :class="['nc-radio-wrap',{'nc-radio-checked' : sizeType == item.key}]"
                  @click="sizeType = item.key "
                >
                  <span class="nc-radio">
                    <span class="nc-radio-inner"></span>
                  </span>
                  <span>{{item.value}}</span>
                </label>
              </div>-->
            </div>
          </div>
          <div class="editor-group">
            <div class="editor-group-label editor-group-label-top">显示内容：</div>
            <div class="editor-group-control">
              <!--显示内容-->
              <div>
                <div class="editor-group" v-if="enableShowTitle">
                  <div class="editor-group-control">
                    <el-checkbox v-model="showTitle">商品名称</el-checkbox>

                    <!-- <label
                      :class="['nc-checkbox-wrap',{'nc-checkbox-checked' : showTitle == 1}]"
                      @click="showTitle = showTitle? 0:1  "
                    >
                      <span class="nc-checkbox">
                        <span class="nc-checkbox-inner"></span>
                      </span>
                      <span>商品名称</span>
                    </label>-->
                  </div>
                </div>
                <div class="editor-group adjust" v-if="enableShowSubTitle">
                  <el-checkbox v-model="showSubTitle">商品简介</el-checkbox>

                  <!-- <label
                    :class="['nc-checkbox-wrap',{'nc-checkbox-checked' : showSubTitle == 1 }]"
                    @click="showSubTitle = showSubTitle? 0:1"
                  >
                    <span class="nc-checkbox">
                      <span class="nc-checkbox-inner"></span>
                    </span>
                    <span>商品简介</span>
                  </label>-->
                </div>
                <div class="editor-group" v-if="enableShowPrice">
                  <el-checkbox v-model="showPrice">商品价格</el-checkbox>

                  <!-- <label
                    :class="['nc-checkbox-wrap',{'nc-checkbox-checked' : showPrice == 1}]"
                    @click="showPrice = showPrice? 0:1"
                  >
                    <span class="nc-checkbox">
                      <span class="nc-checkbox-inner"></span>
                    </span>
                    <span>商品价格</span>
                  </label>-->
                </div>
              </div>
              <!--购买按钮-->
              <div v-if="enableShowBuyBtn">
                <!--是否显示购买按钮-->
                <div class="editor-group">
                  <div class="editor-group-control">
                    <el-checkbox v-model="showBuyBtn">购买按钮</el-checkbox>

                    <!-- <label
                      :class="['nc-checkbox-wrap',{'nc-checkbox-checked' : showBuyBtn == 1}]"
                      @click="showBuyBtn = showBuyBtn?0:1"
                    >
                      <span class="nc-checkbox">
                        <span class="nc-checkbox-inner"></span>
                      </span>
                      <span>购买按钮</span>
                    </label>-->
                  </div>
                </div>
                <!--购买按钮显示样式-->
                <div class="editor-group adjust" v-if="showBuyBtnType">
                  <div class="editor-group-control">
                    <el-radio-group v-model="buyBtnType">
                      <el-radio v-for="(item , index ) in 4" :key="index" :label="index">样式{{item}}</el-radio>
                    </el-radio-group>
                    <!-- <div class="radio-group">
                      <label
                        v-for="(item , index ) in 4"
                        :key="index"
                        :class="['nc-radio-wrap', {'nc-radio-checked' : buyBtnType== index}]"
                        @click="buyBtnType=index"
                      >
                        <span class="nc-radio">
                          <span class="nc-radio-inner"></span>
                        </span>
                        <span>样式{{item}}</span>
                      </label>
                    </div>-->
                    <div class="buy-btn-text" v-if="buyBtnType >= 2">
                      <input
                        type="text"
                        class="input"
                        name="buy-btn-text"
                        maxlength="4"
                        v-model.trim="buyBtnText"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <!--商品角标-->
              <div>
                <!--是否显示商品角标-->
                <div class="editor-group">
                  <div class="editor-group-control">
                    <el-checkbox v-model="showCornerMark">商品角标</el-checkbox>

                    <!-- <label
                      :class="['nc-checkbox-wrap',{'nc-checkbox-checked' : showCornerMark == 1}]"
                      @click="showCornerMark = showCornerMark?0:1"
                    >
                      <span class="nc-checkbox">
                        <span class="nc-checkbox-inner"></span>
                      </span>
                      <span>商品角标</span>
                    </label>-->
                  </div>
                </div>
                <!--商品角标样式-->
                <div class="editor-group adjust" v-if="showCornerMark">
                  <div class="editor-group-control">
                    <el-radio-group v-model="cornerMarkType">
                      <el-radio
                        v-for="(item , index ) in cornerMarkTypeTextArray"
                        :key="index"
                        :label="index"
                      >{{item}}</el-radio>
                    </el-radio-group>
                    <!-- <div class="radio-group">
                      <label
                        v-for="(item , index ) in cornerMarkTypeTextArray"
                        :key="index"
                        :class="['nc-radio-wrap', {'nc-radio-checked' : cornerMarkType== index}]"
                        @click="cornerMarkType=index"
                      >
                        <span class="nc-radio">
                          <span class="nc-radio-inner"></span>
                        </span>
                        <span>{{item}}</span>
                      </label>
                    </div>-->
                    <!-- 自定义的图片上传-->
                    <div v-if="cornerMarkType == 4">
                      <div class="corner-mark-image">
                        <div
                          class="has-not-choose-image"
                          v-if="!cornerMarkImage"
                          @click="bindModifyCornerMarkImage"
                        >
                          <i class="el-icon-plus"></i>
                        </div>
                        <div v-else class="has-choosed-image">
                          <img class="thumb-image" :src="cornerMarkImageUrl" width="50" height="50" />
                          <span class="modify-image" @click="bindModifyCornerMarkImage">更换图片</span>
                        </div>
                      </div>
                      <p class="corner-mark-image-tips">推荐使用 36x36 像素的 .png 图片</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import categoryGroup from "../categoryGroup/categoryGroup";

/**
 * 默认的数据格式
 */
var defaultDataFormat = {
  // 商品来源
  goodsFrom: 0,
  // 是自动获取的规则
  autoGoodsRule: 0,
  // 自动获取的排序
  autoGoodsOrder: 0,
  // 自动获取的分类 1
  autoGoodsCate: 0,
  // 商品显示个数
  goodsMax: 6,
  // 列表样式
  size: 0,
  // 图片填充方式
  imageFillStyle: 0,
  // 显示比例
  displayScale: 0,
  // 显示样式
  sizeType: 0,
  // 是否显示商品名称
  showTitle: true,
  // 是否显示商品简介
  showSubTitle: true,
  // 是否显示商品价格
  showPrice: true,
  // 商品角标
  showCornerMark: true,
  // 商品角标类型
  cornerMarkType: 0,
  // 自定义商品角标图片
  cornerMarkImage: "",
  cornerMarkImageUrl: "",
  // 列表样式 - 详细列表
  showBuyBtn: true,
  // 购买按钮样式
  buyBtnType: 0,
  // 购买按钮文字
  buyBtnText: "购买",
  // 一行3个的购买按钮
  buyBtnExpress: 0,
  // 商品信息
  goodsList: [],
  type: "goods",
  initCateData: {
    categoryId1: "",
    categoryId2: "",
    categoryId3: ""
  }
};
var defaultClass = {
  goodsListContainer: ["goods-list-container"],
  goodsListItem: ["goods-list-item"],
  goodsListInfo: ["goods-list-info"],
  goodsListWrapper: ["goods-list-wrapper"]
};
var defaultGoodsList = [0, 1, 2, 3].map(item => {
  return {
    commonId: 0,
    createTime: "",
    goodsImage: "default_image.png",
    goodsImageUrl:
      "http://file.quanclubs.com/image/1c/45/1c45b9e3536f55ded545579658f00fd0.jpg",
    goodsName: "此处显示商品名称",
    shareIntro: "此处显示商品描述"
  };
});
export default {
  name: "nc-design-item-goods",
  otherInfo: {
    title: "商品",
    type: "goods",
    group: 0,
    max: 0
  },
  components: {
    draggable,
    categoryGroup
  },
  //外部传入参数
  props: {
    show: {
      type: Boolean,
      default: false
    },
    options: {
      type: Object,
      default: null
    },
    cid: {
      type: Number
    },
    showAddMenuGroup: {
      type: Boolean,
      default: false
    },
    selectionGoodsList: {
      type: Array,
      default: []
    }
  },
  data() {
    let data = {initCateData:{
      categoryId1: "",
      categoryId2: "",
      categoryId3: ""
    }};
    if (this.options.type) {
      for (let i in this.options) {
        switch (i) {
          case "autoGoodsCate1":
            data["initCateData"].categoryId1 = this.options[i];
            break;
          case "autoGoodsCate2":
            data["initCateData"].categoryId2 = this.options[i];
            break;
          case "autoGoodsCate3":
            data["initCateData"].categoryId3 = this.options[i];
            break;
          case "showBuyBtn":
            data[i] = this.options[i] == 1 ? true : false;
            break;
          case "showCornerMark":
            data[i] = this.options[i] == 1 ? true : false;
            break;
          case "showPrice":
            data[i] = this.options[i] == 1 ? true : false;
            break;
          case "showSubTitle":
            data[i] = this.options[i] == 1 ? true : false;
            break;
          case "showTitle":
            data[i] = this.options[i] == 1 ? true : false;
            break;
          default:
            data[i] = this.options[i];
            break;
        }
      }
    } else {
      data = $.extend(true, {}, defaultDataFormat);
    }
    let customData = {
      sizeArray: [
        "大图",
        "小图",
        "一大两小",
        "详细列表",
        "一行三个",
        "横向滑动"
      ],
      imageFillStyleArray: ["填充", "留白"],
      displayScaleArray: ["3:2", "1:1"],
      cornerMarkTypeTextArray: ["新品", "热卖", "NEW", "HOT", "自定义"],
      validated: true,
      cateInputWith: 130
    };
    return $.extend({}, data, customData);
  },
  computed: {
    compGoodsList() {
      return this.goodsFrom == 0
        ? this.goodsList.length
          ? this.goodsList
          : defaultGoodsList
        : defaultGoodsList;
    },
    sizeTypeArray() {
      let _size = this.size,
        all = [
          {
            key: 0,
            value: "卡片1"
          },
          {
            key: 1,
            value: "卡片2"
          },
          {
            key: 2,
            value: "极简"
          },
          {
            key: 3,
            value: "瀑布流"
          },
          {
            key: 4,
            value: "促销"
          }
        ];
      if (_size == 0 || _size == 2 || _size == 3) {
        all.splice(3);
      } else if (_size >= 4) {
        return all.splice(2, 1);
      }
      return all;
    },
    /**
     * 比例开关
     */
    enableDisplayScale() {
      return this.size == 0;
    },
    /**
     * 商品名称开关
     */
    enableShowTitle() {
      let _sizeType = this.sizeType,
        _size = this.size;
      if (_size == 0) {
        return true;
      } else if (_size == 1 && _sizeType != 4) {
        return true;
      } else if (_size == 2) {
        return true;
      } else if (_size == 4) {
        return true;
      } else if (_size == 5) {
        return true;
      }
      return false;
    },
    /**
     * 简介开关
     */
    enableShowSubTitle() {
      let _sizeType = this.sizeType,
        _size = this.size,
        _showTitle = this.showTitle;
      if (_size == 0 && _showTitle == 1) {
        return true;
      } else if (_size == 1 && _showTitle == 1 && _sizeType < 2) {
        return true;
      } else if (_size == 2 && _showTitle == 1 && _sizeType < 2) {
        return true;
      }
      return false;
    },
    /**
     * 购买按钮区域开关
     */
    enableShowBuyBtn() {
      let _sizeType = this.sizeType,
        _size = this.size;
      if (_size == 0 && _sizeType != 2) {
        return true;
      } else if (_size == 1 && (_sizeType < 2 || _sizeType == 3)) {
        return true;
      } else if (_size == 2 && _sizeType < 2) {
        return true;
      } else if (_size == 3) {
        return true;
      } else if (_size == 4) {
        return true;
      } else if (_size == 5) {
        return true;
      }
      return false;
    },
    /**
     * 购买按钮样式开关
     */
    showBuyBtnType() {
      var _showBuyBtn = this.showBuyBtn,
        _size = this.size;
      return _showBuyBtn == 1 && _size <= 3;
    },
    /**
     * 金额开关
     */
    enableShowPrice() {
      let _sizeType = this.sizeType,
        _size = this.size;
      if (_size == 0) {
        return true;
      } else if (_size == 1 && _sizeType <= 3) {
        return true;
      } else if (_size == 2) {
        return true;
      } else if (_size == 4) {
        return true;
      } else if (_size == 5) {
        return true;
      }
      return false;
    },
    /**
     * goodsInfo 区域是否显示
     */
    showGoodsInfoPanel() {
      return (
        (this.enableShowTitle && this.showTitle) ||
        this.size == 3 ||
        (this.enableShowSubTitle && this.showTitle && this.showSubTitle) ||
        ((this.enableShowPrice && this.showPrice) || this.sizeType == 4)
      );
    }
  },
  watch: {
    selectionGoodsList: function(val) {
      console.log("watch选择商品", val);
      this.goodsList = val;
    }
  },
  created() {
    this.goodsList.forEach(item => {
      var image = new Image();
      image.src = item.goodsImageUrl;
      if (image.complete) {
        console.log("cache", image.width, image.height);
      } else {
        image.onload = function() {
          console.log(image.width, image.height);
          item.imageWidth = image.width;
          item.imageHeight = image.height;
        };
      }
    });
  },
  mounted() {
    var self = this;
    // $(this.$refs.cate).NcCate({
    //     chosenWidth: '145px',
    //     required: false,
    //     onSelect: function(cateId, cateInfo, cateArray) {
    //         self.autoGoodsCate = cateId ? cateId : 0
    //     },
    //     onReady: function(instance) {
    //         if (self.autoGoodsCate) {
    //             instance.setCateId(self.autoGoodsCate)
    //         }
    //     }
    // })
  },
  methods: {
    handleCateChange(cate1, cate2, cate3) {
      console.log("分类", cate1, cate2, cate3);
      if (cate1) this.autoGoodsCate = cate1;
      if (cate2) this.autoGoodsCate = cate2;
      if (cate3) this.autoGoodsCate = cate3;
    },
    /**
     * 判断当个商品item 上是否显示商品简介
     */
    enableSubTitlePreview(item) {
      let _size = this.size,
        _sizeType = this.sizeType;
      if (_size == 1) {
        if (_sizeType < 2) {
          return this.showTitle && this.showSubTitle;
        } else {
          return false;
        }
      } else if (_size == 2) {
        if (_sizeType < 2) {
          return this.showTitle && this.showSubTitle;
        } else {
          return false;
        }
      } else if (_size == 3 && _sizeType == 1) {
        // 详细列表的特殊情况
        return true;
      } else {
        return (
          this.enableShowSubTitle &&
          this.showTitle &&
          this.showSubTitle &&
          item.shareIntro
        );
      }
    },
    /**
     * 获取样式
     */
    getClassByMethod(fnStr, index, item) {
      return this["genClassBySize" + this.size](index, item)[fnStr];
    },
    genClassBySize0(index, item) {
      var r = $.extend(true, {}, defaultClass);
      r.goodsListContainer.push("goods-list-container-big");
      r.goodsListContainer.push(
        "goods-list-container-" +
          (this.sizeType <= 1 ? "card" + this.sizeType : "simple")
      );
      r.goodsListItem.push("goods-list-item-big");
      r.goodsListItem.push(
        this.imageFillStyle
          ? "goods-list-item-whitespace"
          : "goods-list-item-padding"
      );
      r.goodsListItem.push(
        this.displayScale
          ? "goods-list-item-ratio-1-1"
          : "goods-list-item-ratio-3-2"
      );
      r.goodsListItem.push(
        this.sizeType <= 1 ? "card" + this.sizeType : "simple"
      );
      r.goodsListItem.push("goods-list-item-btn" + this.buyBtnType);
      if (item) {
        r.goodsListInfo.push(this.showTitle ? "has-title" : "");
        r.goodsListInfo.push(
          this.showSubTitle && item.shareIntro ? "has-subtitle" : ""
        );
        r.goodsListInfo.push(this.showPrice ? "has-price" : "");
        r.goodsListInfo.push(this.showBuyBtn ? "has-btn" : "");
      }

      return r;
    },
    /**
     * 生成小图的样式
     */
    genClassBySize1(index, item) {
      let r = $.extend(true, {}, defaultClass);
      r.goodsListContainer.push("goods-list-container-small");
      if (this.sizeType == 4) {
        r.goodsListContainer.push("goods-list-container-promotion");
      } else {
        r.goodsListContainer.push(
          "goods-list-container-" +
            (this.sizeType <= 1 ? "card" + this.sizeType : "simple")
        );
      }
      if (this.sizeType != 3) {
        r.goodsListItem.push(
          this.imageFillStyle
            ? "goods-list-item-whitespace"
            : "goods-list-item-padding"
        );
      }
      r.goodsListItem.push("goods-list-item-small");
      let a = "";
      if (this.sizeType <= 1) {
        a = "card" + this.sizeType;
      } else if (this.sizeType == 2) {
        a = "simple";
      } else if (this.sizeType == 3) {
        a = "waterfall";
      } else if (this.sizeType == 4) {
        a = "promotion";
      }
      r.goodsListItem.push(a);
      if (this.sizeType != 4) {
        r.goodsListItem.push("goods-list-item-btn" + this.buyBtnType);
      }
      r.goodsListInfo.push(this.showTitle ? "has-title" : "");
      r.goodsListInfo.push(this.showPrice ? "has-price" : "");
      if (this.sizeType != 2) {
        r.goodsListInfo.push("has-subtitle");
        r.goodsListInfo.push(this.showBuyBtn ? "has-btn" : "");
      }
      return r;
    },
    /**
     * 生成一大两小的样式
     */
    genClassBySize2(index, item) {
      let r = $.extend(true, {}, defaultClass);
      r.goodsListContainer.push("goods-list-container-hybrid");
      r.goodsListContainer.push(
        "goods-list-container-" +
          (this.sizeType <= 1 ? "card" + this.sizeType : "simple")
      );
      r.goodsListWrapper.push(
        index % 3 == 0
          ? "goods-list-wrapper-hybrid-big"
          : "goods-list-wrapper-hybrid-small"
      );
      r.goodsListItem.push(
        index % 3 == 0
          ? "goods-list-item-big goods-list-item-hybrid-big"
          : "goods-list-item-small goods-list-item-hybrid-small"
      );
      r.goodsListItem.push("goods-list-item-btn" + this.buyBtnType);
      r.goodsListItem.push(
        this.imageFillStyle
          ? "goods-list-item-whitespace"
          : "goods-list-item-padding"
      );
      r.goodsListItem.push(
        this.sizeType <= 1 ? "card" + this.sizeType : "simple"
      );
      r.goodsListInfo.push(this.showTitle ? "has-title" : "");
      r.goodsListInfo.push(this.showPrice ? "has-price" : "");
      if (this.sizeType != 2 && item) {
        r.goodsListInfo.push(
          this.showTitle && this.showSubTitle ? "has-subtitle" : ""
        );
        r.goodsListInfo.push(this.showBuyBtn ? "has-btn" : "");
      }
      return r;
    },
    /**
     * 生成详细列表样式
     */
    genClassBySize3() {
      let r = $.extend(true, {}, defaultClass);
      r.goodsListContainer.push("goods-list-container-list");
      r.goodsListContainer.push(
        "goods-list-container-" +
          (this.sizeType <= 1 ? "card" + this.sizeType : "simple")
      );
      r.goodsListItem.push("goods-list-item-list");
      r.goodsListItem.push("goods-list-item-btn" + this.buyBtnType);
      r.goodsListItem.push(
        this.imageFillStyle
          ? "goods-list-item-whitespace"
          : "goods-list-item-padding"
      );
      r.goodsListItem.push(
        this.sizeType <= 1 ? "card" + this.sizeType : "simple"
      );
      r.goodsListInfo.push(this.showTitle ? "has-title" : "");
      r.goodsListInfo.push(this.showPrice ? "has-price" : "");
      this.sizeType == 1 &&
        r.goodsListInfo.push(this.showSubTitle ? "has-subtitle" : "");
      r.goodsListInfo.push(this.showBuyBtn ? "has-btn" : "");
      return r;
    },
    genClassBySize4() {
      let r = $.extend(true, {}, defaultClass);
      this.buyBtnType = 1;
      r.goodsListContainer.push("goods-list-container-three");
      r.goodsListContainer.push("goods-list-container-simple");
      r.goodsListItem.push("goods-list-item-three");
      r.goodsListItem.push("goods-list-item-btn1");
      r.goodsListItem.push(
        this.imageFillStyle
          ? "goods-list-item-whitespace"
          : "goods-list-item-padding"
      );
      r.goodsListItem.push("simple");
      r.goodsListInfo.push(this.showTitle ? "has-title" : "");
      r.goodsListInfo.push(this.showPrice ? "has-price" : "");
      r.goodsListInfo.push(this.showBuyBtn ? "has-btn" : "");
      return r;
    },
    genClassBySize5() {
      let r = $.extend(true, {}, defaultClass);
      this.buyBtnType = 1;
      r.goodsListContainer.push("goods-list-container-three nowrap");
      r.goodsListContainer.push("goods-list-container-simple");
      r.goodsListItem.push("goods-list-item-three");
      r.goodsListItem.push("goods-list-item-btn1");
      r.goodsListItem.push(
        this.imageFillStyle
          ? "goods-list-item-whitespace"
          : "goods-list-item-padding"
      );
      r.goodsListItem.push("simple");
      r.goodsListInfo.push(this.showTitle ? "has-title" : "");
      r.goodsListInfo.push(this.showPrice ? "has-price" : "");
      r.goodsListInfo.push(this.showBuyBtn ? "has-btn" : "");
      r.goodsListInfo.push("has-subtitle");
      return r;
    },
    /**
     * 点击修改列表样式
     * @param index
     */
    bindModifySize(index) {
      this.size = index;
      this.sizeType = this.size >= 4 ? 2 : 0;
    },
    bindGoodsMaxInput(event) {
      let a = $(event.target).val(),
        b = parseInt(a.replace(/\D+/, "")),
        r = isNaN(b) ? 1 : b > 50 ? 50 : b < 1 ? 1 : b;
      this.goodsMax = r;
      $(event.target).val(r);
    },
    /**
     * 手动添加商品
     */
    bindAddGoods() {
      var self = this;
      console.log("点击选择商品",this.goodsList);
      this.$parent.handleShowGoodsModal(this.goodsList);
      // Nc.openGoods(
      //   {
      //     selectedArray: self.goodsList
      //   },
      //   function(selectGoodsList) {
      //     self.goodsList = selectGoodsList;
      //     self.validated = true;
      //   }
      // );
    },
    /**
     * 修改商品来源
     */
    bindChangeGoodsFrom(value) {
      this.goodsFrom = value;
      this.validated = true;
    },
    /**
     * 删除选择的商品
     * @param index
     */
    bindRemoveGoods(index) {
      this.goodsList.splice(index, 1);
    },
    /**
     * 跟换自定义角标
     */
    bindModifyCornerMarkImage() {
      var self = this;
      Nc.openAlbum(
        {
          multiSelect: false
        },
        function(selected) {
          let d = selected[0];
          self.cornerMarkImage = d.filesName;
          self.cornerMarkImageUrl = d.filesNameUrl;
        }
      );
    },
    /**
     * 获取当前数据
     */
    getCurrentData() {
      var a = {},
        field = [
          "goodsFrom",
          "autoGoodsRule",
          "autoGoodsOrder",
          "autoGoodsCate",
          "goodsMax",
          "size",
          "imageFillStyle",
          "displayScale",
          "sizeType",
          "showTitle",
          "showSubTitle",
          "showPrice",
          "showCornerMark",
          "cornerMarkType",
          "cornerMarkImage",
          "cornerMarkImageUrl",
          "showBuyBtn",
          "buyBtnType",
          "buyBtnText",
          "buyBtnExpress",
          "goodsList",
          "type"
        ];
      field.forEach(item => {
        if (
          item == "showBuyBtn" ||
          item == "showSubTitle" ||
          item == "showTitle" ||
          item == "showPrice" ||
          item == "showCornerMark"
        ) {
          let _val = 0;
          if (this[item]) _val = 1;
          a[item] = _val;
        } else {
          a[item] = this[item];
        }
      });
      return (this.validated =
        this.goodsFrom == 1 || !!this.goodsList.length ? a : null);
    }
  }
};
</script>